<template>
	<div class="app-container">
		<!--工具栏-->
		<div class="head-container">
			<!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
			<crudOperation :permission="permission" />
			<!--表单组件-->
			<el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0"
				:title="crud.status.title" width="1100px">
				<el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="80px">
					<el-row :gutter="0.5">
						<el-col :span="7">
							<el-form-item label="姓名" prop="name">
								<el-input v-model="form.name" class="input" />
							</el-form-item>
						</el-col>
						<el-col :span="7">
							<el-form-item label="性别" prop="genderId">
								<el-radio v-for="item in dict.gender_type" :key="item.id" v-model="form.genderId"
									:label="item.value">{{ item.label }}
								</el-radio>
							</el-form-item>
						</el-col>
						<el-col :span="7">
							<el-form-item label="民族" prop="nationId" >
								<el-select v-model="form.nationId" filterable placeholder="请选择" class="input" >
									<el-option v-for="item in dict.nation" :key="item.id" :label="item.label"
										:value="item.value" />
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="0.5">
						<el-col :span="7">
							<el-form-item label="身份证号" prop="idCardNo">
								<el-input v-model="form.idCardNo" class="input" />
							</el-form-item>
						</el-col>
						<el-col :span="7">
							<el-form-item label="出生年月" prop="birthDate">
								<el-date-picker v-model="form.birthDate" type="month" format="yyyy-MM" style="width: 200px;"/>
							</el-form-item>
						</el-col>
						<el-col :span="7">
							<el-form-item label="政治面貌" prop="politicalId">
								<el-select v-model="form.politicalId" filterable placeholder="请选择" class="input">
									<el-option v-for="item in dict.political_climate" :key="item.id" :label="item.label"
										:value="item.value" />
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="0.5">
						<el-col :span="7">
							<el-form-item label="学历层次">
								<el-select v-model="form.educationalId" filterable placeholder="请选择" class="input" style="width: 200px;" >
									<el-option v-for="item in dict.education" :key="item.id" :label="item.label"
										:value="item.value" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="7">
							<el-form-item label="学位">
								<el-input v-model="form.degree" class="input"/>
							</el-form-item>
						</el-col>
						<el-col :span="7">
							<el-form-item label="专业">
								<el-input v-model="form.major" class="input"/>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="0.5">
						<el-col :span="7">
							<el-form-item label="工作单位">
								<el-input v-model="form.workUnit" class="input"/>
							</el-form-item>
						</el-col>
						<el-col :span="7">
							<el-form-item label="职称">
								<el-input v-model="form.postitional" class="input"/>
							</el-form-item>
						</el-col>
						<el-col :span="7">
							<el-form-item label="联系电话">
								<el-input v-model="form.phone" class="input"/>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="0.5">
						<el-col :span="11">
							<el-form-item label="现任职务">
								<el-input v-model="form.job" style="width: 350px;" />
							</el-form-item>
						</el-col>
						<el-col :span="7">
							<el-form-item label="银行卡号">
								<el-input v-model="form.bankNo" class="input"/>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="状态" prop="enabled" >
								<el-radio v-for="item in dict.data_status" :key="item.id" v-model="form.enabled"
									:label="item.value">{{ item.label }}</el-radio>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="0.5">
						<el-col :span="24">
							<el-form-item label="教学科目">
								<el-input v-model="form.subjects" style="width: 900px;" />
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="0.5">
						<el-col :span="24">
							<el-form-item label="备注">
								<el-input v-model="form.remark" style="width: 900px;" />
							</el-form-item>
						</el-col>
					</el-row>
<!-- 					<el-row :gutter="0.5">
						<el-col :span="12">
							<el-form-item label="照片真实路径">
								<el-input v-model="form.photoUrl" style="width: 370px;" />
							</el-form-item>
						</el-col>
					</el-row> -->

				</el-form>

				<div slot="footer" class="dialog-footer">
					<el-button type="text" @click="crud.cancelCU">取消</el-button>
					<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
				</div>
			</el-dialog>


			<!--表格渲染-->
			<el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;"
				@selection-change="crud.selectionChangeHandler">
				<el-table-column :selectable="checkboxT" type="selection" width="55" />
				<el-table-column prop="name" label="姓名" width="60px"/>
				<!-- <el-table-column prop="userId" label="用户ID" /> -->
				<el-table-column prop="genderId" label="性别" width="50px">
					<template slot-scope="scope">
						{{ dict.label.gender_type[scope.row.genderId] }}
					</template>
				</el-table-column>
				<el-table-column prop="nationId" label="民族" width="80px">
					<template slot-scope="scope">
						{{ dict.label.nation[scope.row.nationId] }}
					</template>
				</el-table-column>
				<el-table-column prop="politicalId" label="政治面貌" width="100px">
					<template slot-scope="scope">
						{{ dict.label.political_climate[scope.row.politicalId] }}
					</template>
				</el-table-column>
				<!-- <el-table-column prop="photoUrl" label="照片真实路径" /> -->
				<el-table-column prop="workUnit" label="工作单位" />
				<el-table-column prop="birthDate" label="出生年月" width="80px">
					<template slot-scope="scope">
					  <span>{{ parseTime(scope.row.birthDate, '{y}-{m}') }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="educationalId" label="学历层次" width="100px">
					<template slot-scope="scope">
						{{ dict.label.education[scope.row.educationalId] }}
					</template>
				</el-table-column>
				<el-table-column prop="degree" label="学位" width="80px"/>
				<el-table-column prop="major" label="专业" />
				<!-- <el-table-column prop="phone" label="联系电话" /> -->
				<!-- <el-table-column prop="idCardNo" label="身份证号" />
				<el-table-column prop="bankNo" label="银行卡号" /> -->
				<!-- <el-table-column prop="job" label="现任职务" /> -->
				<el-table-column prop="postitional" label="专业技术职称" width="100px"/>
				<!-- <el-table-column prop="subjects" label="可承担教学科目" /> -->
				<!-- <el-table-column prop="remark" label="备注" /> -->
				<el-table-column label="状态" align="center" prop="enabled" width="70">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.enabled" active-color="#409EFF" inactive-color="#F56C6C"
							@change="changeEnabled(scope.row, scope.row.enabled,)" />
					</template>
				</el-table-column>
				<el-table-column v-if="checkPer(['admin','teacher:edit','teacher:del'])" label="操作" width="150px"
					align="center">
					<template slot-scope="scope">
						<udOperation :data="scope.row" :permission="permission" />
					</template>
				</el-table-column>
			</el-table>
			<!--分页组件-->
			<pagination />
		</div>
	</div>
</template>

<script>
	import crudTeacher from '@/api/teacher'
	import CRUD, {
		presenter,
		header,
		form,
		crud
	} from '@crud/crud'
	import rrOperation from '@crud/RR.operation'
	import crudOperation from '@crud/CRUD.operation'
	import udOperation from '@crud/UD.operation'
	import pagination from '@crud/Pagination'

	const defaultForm = {
		teacherId: null,
		name: null,
		userId: null,
		genderId: null,
		nationId: null,
		photoUrl: null,
		workUnit: null,
		birthDate: null,
		politicalId: null,
		educationalId: null,
		degree: null,
		major: null,
		phone: null,
		idCardNo: null,
		bankNo: null,
		job: null,
		postitional: null,
		subjects: null,
		remark: null,
		enabled: 'true'
	}
	export default {
		name: 'Teacher',
		components: {
			pagination,
			crudOperation,
			rrOperation,
			udOperation
		},
		mixins: [presenter(), header(), form(defaultForm), crud()],
		dicts: ['gender_type', 'nation', 'political_climate', 'education', 'data_status'],
		cruds() {
			return CRUD({
				title: '教师',
				url: 'api/teacher',
				idField: 'teacherId',
				sort: 'teacherId,desc',
				crudMethod: {
					...crudTeacher
				}
			})
		},
		data() {
			return {
				permission: {
					add: ['admin', 'teacher:add'],
					edit: ['admin', 'teacher:edit'],
					del: ['admin', 'teacher:del']
				},
				rules: {
					name: [{
						required: true,
						message: '姓名不能为空',
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			// 新增与编辑前做的操作
			[CRUD.HOOK.afterToCU](crud, form) {
				if(form.teacherId){
					if(`${form.genderId}` != null){
						form.genderId = `${form.genderId}`
					}
					if(`${form.nationId}` != null){
						form.nationId = `${form.nationId}`
					}
					if(`${form.politicalId}` != null){
						form.politicalId = `${form.politicalId}`
					}
					if(`${form.educationalId}` != null){
						form.educationalId = `${form.educationalId}`
					}
				}
				form.enabled = `${form.enabled}`
			},
			// 钩子：在获取表格数据之前执行，false 则代表不获取数据
			[CRUD.HOOK.beforeRefresh]() {
				return true
			},
			// 改变状态
			changeEnabled(data, val) {
				this.$confirm('此操作将 "' + this.dict.label.data_status[val] + '" ' + data.name + '培训期次, 是否继续？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					crudPeriod.edit(data).then(res => {
						this.crud.notify(this.dict.label.data_status[val] + '成功', CRUD.NOTIFICATION_TYPE
							.SUCCESS)
					}).catch(err => {
						data.enabled = !data.enabled
						console.log(err.response.data.message)
					})
				}).catch(() => {
					data.enabled = !data.enabled
				})
			},
			checkboxT(row, rowIndex) {
				return row.id !== 1
			}
		}
	}
</script>

<style scoped>

</style>

<style>
	  .input {
	    width: 200px;
	  }
</style>